<template>
  <!-- 背景容器 -->
  <div class="background-container">
    <!-- 页面顶部的返回和标题 -->
    <el-page-header @back="goBack" content="详情页面">
    </el-page-header>

    <!-- 搜索表单 -->
    <form class="search" @submit.prevent="submitForm">
      <input v-model="searchQuery" placeholder="搜索课程或教师" aria-label="Search" class="searchFont" />
      <el-select v-model="searchType" placeholder="请选择搜索类型" class="searchSelect">
        <el-option label="搜索课程" value="course"></el-option>
        <el-option label="搜索教师" value="teacher"></el-option>
      </el-select>
      <el-button @click="submitForm" type="submit" icon="el-icon-search" class="searchButton"></el-button>
    </form>
    <br><br><br><br>

    <!-- 视频列表 -->
    <div class="video-list">
      <!-- 遍历视频列表 -->
      <div v-for="(video, id) in videos" :key="id" class="video-item">
        <!-- 视频详情链接 -->
        <a @click="goToVideoDetail(videos, id)">
          <!-- 视频封面图 -->
          <img :src="video.courseLogo || 'default-cover.jpg'" class="picture">
          <!-- 视频操作按钮 -->
          <div class="overlay">
            <i class="el-icon-video-play">{{ video.playNumber }}</i>
            <i class="el-icon-star-on">{{ video.favoriteNumber }}</i>
            <i class="el-icon-chat-dot-round">{{ video.commentNumber }}</i>
          </div>
          <!-- 视频标题 -->
          <div class="font">
            <p style="margin-top: 5px; text-align: left;margin-left: -20px;">{{ video.courseName }}</p>
          </div>
        </a>
        <!-- 讲师链接 -->
        <a @click="goTeacher(video.id)">
          <div class="upzhu">
            <!-- 讲师头像 -->
            <img src="@/assets/upzhu.png" alt="Logo" class="img">
            <!-- 讲师姓名 -->
            <p>教师：{{ video.lecturerName }}</p>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>


<script>
import axios from 'axios';
import { Toast } from 'vant';
export default {
  data() {
    return {
      videos:[],
      searchQuery:'',

    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    init(){
      const courseJson =localStorage.getItem("courses") || '';
      if(!courseJson){
        Toast.error('未搜索到相关课程')
      }else{
        this.videos=JSON.parse(courseJson)
      }
    },
    submitForm() {
      if(this.searchType==="course"){
        axios.post('http://localhost:8081/springboot01/course/searchCourse',
          {
            search: this.searchQuery
          },
          {
            headers: {
              'Content-Type': 'application/json'
            }
          }
      )
          .then(response => {
            console.log('Response data:', response.data);
            if (response.data.msg === "请求成功!") {
              this.searchQuery = ''
              this.videos=response.data.data
            } else {
              alert(response.data.msg)
            }
          })
          .catch(error => {
            console.error('搜索失败', error);
            this.error = '请重新搜索';
          });
      }else{
        axios.post('http://localhost:8081/springboot01/user/listCourseUser',
          {
            search: this.searchQuery
          },
          {
            headers: {
              'Content-Type': 'application/json'
            }
          }
      )
          .then(response => {
            console.log('Response data:', response.data);
            if (response.data.msg === "请求成功!") {
              this.searchQuery = ''
              this.videos=response.data.data

            } else {
              alert(response.data.msg)
            }
          })
          .catch(error => {
            console.error('搜索失败', error);
            this.error = '请重新搜索';
          });
      }
      
    },
    goToVideoDetail(videos,id) {
      this.$router.push(`/videoDetail?videos=${encodeURIComponent(JSON.stringify(videos[id]))}`);

    },
    goTeacher(id) {
      this.$router.push({
        name: 'UpView',
        params: { Id: id }
      });
    },

  },

  created() {
    this.init();

  },



}
</script>

<style scoped>
.background-container {
  background-image: url('/src/assets/fengmian3.jpg');
  background-size: cover; /* 背景图大小，cover 表示尽可能填充容器 */
  background-position: top; /* 背景图位置，顶部对齐 */
  background-repeat: no-repeat; /* 背景图不重复 */
  height: 150px; /* 设置容器高度，可以根据实际需求调整 */
  align-content: center;
}
.search{
  display: flex;
  justify-content: center; /* 水平居中 */
}
.font{
  margin-left:20px ;
  text-align: left;
}

.video-list {
  display: flex; /* 使用Flexbox布局 */
  flex-wrap: wrap; /* 允许视频项在需要时换行 */
  justify-content: center; /* 在主轴上居中对齐 */
  margin: 0 auto; /* 如果需要固定宽度则去除这行 */
  width: fit-content; /* 或者指定一个具体的宽度，如果需要的话 */
}

.video-item {
  display: flex; /* 设置为 Flex 容器 */
  flex-direction: column; /* 垂直排列子元素 */
  margin: 30px; /* 可以在这里添加外边距以分隔各个视频项 */
  width: 260px; /* 设定固定宽度，与图片宽度一致 */
}

.picture {
  width: 260px;
  height: 150px;
  margin-top: 20px;
  border-radius: 10px;
}

.upzhu {
margin-left: -20px;
  font-size: 15px;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.upzhu p{
  font-style: italic;
  font-size: 13px;
  text-align: center;


}

.searchFont{
  border-radius: 0;
  border-color: white;
}

.searchBotton{
  border-radius: 0;
}

.img{
  width: 20px;
  height: auto;
  margin-right: 5px;
  margin-left:20px;
}

</style>